<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>朋友圈发布</title>
	<link rel="stylesheet" type="text/css" href="./qy/css/public.css">
	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
	<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
	<style type="text/css">
		html{
			height: 100%;
		}
		body{
			height: 100%;
		}
		.friendPublish_container{
			height: 100%;
		}
		.friendPublish_content{
			height: 100%;
			position: relative;
		}
		.friendPublish_mainTextarea_container{
			display: flex;
		}
		.friendPublish_mainTextarea_container textarea{
			flex: 1;
			border: none;
			resize: none;
			height: 114px;
			padding: 10px;
			font-size: 15px;
			color: #353535;
			margin-bottom: 15px;
			font-family: "Microsoft YaHei";
		}
		.friendPublish_mainImg_container{
			position: relative;
			overflow: hidden;
			padding: 5px;
		}
		.friendPublish_mainImg_content{
			width: 88px;
			height: 88px;
			position: relative;
			float: left;
			margin: 10px 5px;
		}
		.friendPublish_mainImg_content img{
			width: 88px;
			height: 88px;
			display: block;
		}
		.friendPublish_mainImg_content svg{
			position: absolute;
			width: 10px;
			height: 10px;
			right: -9px;
			top: -7px;
			background: #eaeaea;
			padding: 5px;
			border-radius: 50%;
			display: block;
			fill: #909090;
		}
		.friendPublish_mainVideoAdd_container{
			width: 84px;
			height: 84px;
			position: relative;
			float: left;
			margin: 10px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #ececec;
		}
		.friendPublish_mainVideoAdd_container svg{
			width: 50px;
			height: 50px;
			display: block;
			fill: #cdcdcd;
		}
		.friendPublish_mainImgAdd_container{
			width: 84px;
			height: 84px;
			position: relative;
			float: left;
			margin: 10px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #ececec;
			cursor: pointer;
		}
		.friendPublish_mainImgAdd_container svg{
			width: 50px;
			height: 50px;
			display: block;
			fill: #cdcdcd;
		}
		.friendPublish_mainVideo_container{
			align-items: flex-end;
			display: flex;
			padding: 0 5px;
		}
		.friendPublish_mainVideo_content{
			margin: 10px 5px;
		}
		.friendPublish_mainLink_container{
			display: flex;
			padding: 10px;
		}
		.friendPublish_mainLink_container input{
			-webkit-appearance: none;
			border: 1px solid #ececec;
			flex: 1;
			font-size: 15px;
			padding: 10px;
			border-radius: 5px;
			color: #666;
			font-family: "Microsoft YaHei";
		}
		.friendPublish_submitButton_container{
			display: flex;
			padding: 0 25px;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 50px;
		}
		.friendPublish_submitButton_container button{
			outline: none;
			-webkit-appearance: none;
			background: #5076b8;
			border: none;
			font-size: 15px;
			color: #fff;
			border-radius: 5px;
			flex: 1;
			padding: 10px;
		}
		.friendPublish_mainVideoImgAdd_container input{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			opacity: 0;
		}
	</style>
</head>
<body>
	<div class="friendPublish_container">
		<div class="friendPublish_content">
			<div class="friendPublish_main_container">
				<!-- 多行文本 -->
				<div class="friendPublish_mainTextarea_container">
					<textarea placeholder="输入想发表的内容"></textarea>
				</div>
				<!-- 图片 -->
				<div class="friendPublish_mainImg_container">
					<div class="friendPublish_mainImg_content">
						<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1354268575,1268995723&fm=26&gp=0.jpg">
						<svg t="1596080052003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3099"><path d="M671.830688 511.699001l319.059377-319.059377c43.945914-43.945914 43.945914-115.583774 0-159.529688-43.945914-43.945914-115.583774-43.945914-159.529688 0l-319.059377 319.059377-319.059377-319.059377c-43.945914-43.945914-115.583774-43.945914-159.529688 0-43.945914 43.945914-43.945914 115.583774 0 159.529688l319.059377 319.059377-319.059377 319.059377c-43.945914 43.945914-43.945914 115.583774 0 159.529688 43.945914 43.945914 115.583774 43.945914 159.529688 0l319.059377-319.059377 319.059377 319.059377c43.945914 43.945914 115.583774 43.945914 159.529688 0 43.945914-43.945914 43.945914-115.583774 0-159.529688L671.830688 511.699001z" p-id="3100"></path></svg>
					</div>
					<!-- 添加图片图标 -->
					<div class="friendPublish_mainImgAdd_container friendPublish_mainVideoImgAdd_container">
						<svg t="1596092095450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1991"><path d="M512 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666666V213.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v597.333334c0 25.6-17.066667 42.666667-42.666667 42.666666z" p-id="1992"></path><path d="M810.666667 554.666667H213.333333c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666667h597.333334c25.6 0 42.666667 17.066667 42.666666 42.666667s-17.066667 42.666667-42.666666 42.666667z" p-id="1993"></path></svg>
						<input type="file" accept="image/png, image/jpeg, image/jpg" name="">
					</div>
				</div>
				<!-- 视频 -->
				<div class="friendPublish_mainVideo_container">
					<!-- 视频部分 -->
					<div class="friendPublish_mainVideo_content">
						<div class="prism-player" id="player-con"></div>
					</div>
					<!-- 添加视频图标 -->
					<div class="friendPublish_mainVideoAdd_container friendPublish_mainVideoImgAdd_container">
						<svg t="1596079809668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2261"><path d="M810.666667 469.333333h-256V213.333333a42.666667 42.666667 0 0 0-85.333334 0v256H213.333333a42.666667 42.666667 0 0 0 0 85.333334h256v256a42.666667 42.666667 0 0 0 85.333334 0v-256h256a42.666667 42.666667 0 0 0 0-85.333334z" p-id="2262"></path></svg>
						<input type="file" accept="video/mp4" name="">
					</div>
				</div>
				<!-- 图文链接 -->
				<div class="friendPublish_mainLink_container">
					<input type="text" name="" placeholder="请输入图文链接">
				</div>
			</div>
			<div class="friendPublish_submitButton_container">
				<button>发布</button>
			</div>
		</div>
	</div>
	<script src="/cdn/jquery.js"></script>
	<script type="text/javascript">
		$('.friendPublish_mainImg_content svg').click(function(){
			$(this).parent().remove();
		})
	</script>
	<!-- 视频 -->
	<script>
	var player = new Aliplayer({
	  "id": "player-con",
	  "source": "https://jiasu.weidogs.com/sv/50f3ed36-173996c8260/50f3ed36-173996c8260.mp4?auth_key=1596007166-1d86b3d7988c401a937a9c0211b7ebb4-0-ed0b5d366d044100a6d8df88b976cac9",
	  "width": "220px",
	  "height": "200px",
	  "autoplay": false,
	  "isLive": false,
	  "cover": "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg",
	  "rePlay": false,
	  "playsinline": true,
	  "preload": false,
	  "controlBarVisibility": "hover",
	  "useH5Prism": true,
	  "skinLayout": [
	    {
	      "name": "bigPlayButton",
	      "align": "blabs",
	      "x": 80,
	      "y": 65
	    },
	    {
	      "name": "H5Loading",
	      "align": "cc"
	    },
	    {
	      "name": "errorDisplay",
	      "align": "tlabs",
	      "x": 0,
	      "y": 0
	    },
	    {
	      "name": "infoDisplay"
	    },
	    {
	      "name": "tooltip",
	      "align": "blabs",
	      "x": 0,
	      "y": 56
	    },
	    {
	      "name": "thumbnail"
	    },
	    {
	      "name": "controlBar",
	      "align": "blabs",
	      "x": 0,
	      "y": 0,
	      "children": [
	        {
	          "name": "progress",
	          "align": "blabs",
	          "x": 0,
	          "y": 44
	        },
	        {
	          "name": "playButton",
	          "align": "tl",
	          "x": 15,
	          "y": 12
	        },
	        {
	          "name": "timeDisplay",
	          "align": "tl",
	          "x": 10,
	          "y": 7
	        },
	        {
	          "name": "fullScreenButton",
	          "align": "tr",
	          "x": 10,
	          "y": 12
	        },
	        {
	          "name": "volume",
	          "align": "tr",
	          "x": 5,
	          "y": 10
	        }
	      ]
	    }
	  ]
	}, function (player) {
	    console.log("The player is created");
	  }
	);
	</script>
</body>
</html>